<template>
    <div class="container">
        <!--登录盒子-->
        <div class="login-wrapper">
            <!--图片logo区域-->
            <div class="header">Login</div>
            <!--登录表单区域  :rules="rules"  表单校验对象 -->
            <el-form  ref="loginFormRef" class="form-wrapper" :model="loginForm"  :rules="loginFormRules">
                <!--用户名  prop 指定验证规则-->
                <el-form-item  prop="username">
                    <input class="input-item"  v-model="loginForm.username" placeholder="username">
                </el-form-item>
                <!--密码-->
                <el-form-item prop="password">
                    <input class="input-item"   type="password" v-model="loginForm.password" placeholder="password">
                </el-form-item>
                <!--验证码-->
                <el-form-item prop="code">
                    <input id="capt"  prefix-icon="el-icon-key" class="input-item" v-model="loginForm.code" placeholder="点击图片切换验证码" style="width: 200px; margin-right: 10px">
                    <img id="captc" :src="captchaUrl"  @click="getCaptcha" alt=""  width="110" height="40" style="">
                </el-form-item>
                <!--按钮区域-->

                <div type="primary" class="btn" @click="formSubmit">Login</div>

            </el-form>

        </div>
    </div>
</template>

<script>


//导入
import {getCode,login} from "@/request/api";

export default {
    name: 'LoginView',
    data () {
        return {
            captchaUrl: "",
            loginFormRules:{  // 表单验证规则对象
                username:[
                    { required: true, message: '请输入用户名', trigger: 'blur' },
                    { min: 3, max: 10, message: '长度在 3 到 10 个字符', trigger: 'blur' }
                ],
                password:[
                    { required: true, message: '请输入密码', trigger: 'blur' },
                    { min: 5, max: 15, message: '长度在 5 到 15 个字符', trigger: 'blur' }
                ],
                code:[
                    { required: true, message: '请输入验证码', trigger: 'blur' }
                ]
            },
            loginForm:{   // 表单数据对象
                username:'admin',
                password:'123456',
                code:'',
                imguuid:'',

            }
        }
    },
    methods:{
        formSubmit(){
            this.$refs.loginFormRef.validate(valid=>{
                if (!valid) return;  //  表单校验不通过
                //  发送异步请求   1.this.$http.get()
                // 2.发送异步请求
                login(this.loginForm).then(response => {
                    if (response.code==200){
                        // 保存token
                        window.sessionStorage.setItem("token", response.data.token)
                        window.sessionStorage.setItem("nickName", response.data.nickName)
                        this.$message({
                            type:'success',
                            message:response.msg,
                            onClose:()=>{
                                //  切换路由 到主页面
                                /*this.$router.push("/")*/
                                window.location.href = '/'

                            }
                        })
                        return
                    }
                    this.$message.error(response.msg)
                }).catch(error => {
                    this.$message.error("请求失败!!!")
                })
            })
        },
        getCaptcha(){
            //发送异步请求  请求验证码  then 成功
            getCode().then(response=>{
                console.log(response)
                //将response.data.img  -》  图片base64字符串
                this.captchaUrl="data:image/jpeg;base64,"+response.data.img
                this.loginForm.imguuid = response.data.imguuid;
            }).catch(err=>{

                this.$message.error('验证码请求失败')
            })
        }
    },
    created() {
        this.getCaptcha()
    }
}
</script>

<style scoped>

html {
    height: 100%;
}
body {
    height: 100%;
}
.container {
    /* margin-top: 5%; */
    height: 900px;
    width: 100%;
    background-image: linear-gradient(to right, #fbc2eb, #a6c1ee);
}
.login-wrapper {
    background-color: #fff;
    width: 358px;
    height: 588px;
    border-radius: 15px;
    padding: 0 50px;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
}
.header {
    font-size: 38px;
    font-weight: bold;
    text-align: center;
    line-height: 200px;
}
.input-item {
    display: block;
    width: 100%;
    margin-bottom: 20px;
    border: 0;
    padding: 10px;
    border-bottom: 1px solid rgb(128, 125, 125);
    font-size: 15px;
    outline: none;
}

#capt{
    position: relative;
}

#captc{
    position: absolute;
    left: 260px;
    top: -2px;
}

.btn {
    text-align: center;
    padding: 10px;
    margin: 0 auto;
    width: 100%;
    margin-top: 40px;
    background-image: linear-gradient(to right, #a6c1ee, #fbc2eb);
    color: #fff;

}
.msg {
    text-align: center;
    line-height: 88px;
}
a {
    text-decoration-line: none;
    color: #abc1ee;
}

.btn{
    text-align: center;
    padding: 10px;
    width: 100%;
    borrder-adius:25px;

    background-image: linear-gradient(to right, #a6c1ee, #fbc2eb);
}

</style>